<!doctype html>
<html lang="en">	
	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>11.浮动-none</title>
		<link rel="stylesheet" href="../css/node-public.css">
	</head>
	<body>
		
		<div id="box">
			<h1>11.浮动-none</h1>
			<a href="../confused is Blog/confused is Blog.html">首页</a>
		</div>
		<div id="main-box">
			<ul>
				<li>
					<h2>box-shadow</h2>
					<span>盒子阴影
			x   偏移量  必须写的
			y   偏移量	必须写的
			px  模糊半径
			px  扩展半径
			阴影颜色   
				外部阴影
			inset   内部阴影

			多条阴影：
			box-shadow:150px 150px 0px 0px #000,
				300px 300px 0px 0px #f66;
			多条阴影由逗号隔开，写在前面的阴影在上面，后面的在下面
			阴影的移动都是相对于当前自己的盒子</span>
				</li>
				<li>
					<h2>浮动</h2>
					<span>文字的基线对齐造成行内块会上下不对齐
		
		float   浮动
			left   左浮动
			right  右浮动
		
		一般的块级 ： 独占一行
		浮动属性能让元素变成块级，但是不会独占一行，会并排
					</span>
				</li>
				<li>
					<h2>浮动的特点</h2>
					<span>float: none;  不浮动
		float浮动：
			1、将元素转成块级
			2、能够设置元素水平的排列
			3、能够元素并排
			4、宽高默认是0，可以由内容撑开宽高
			5、脱离文档流。浮到半空中，不占据文档流里的空间
			6、父级没有高度------父级高度塌陷
			7、浮动元素在遇到父级的边缘的时候会停下来
			8、会挤出文字、行内元素、行内块
			9、浮动元素会影响后面的元素

		清除浮动：清除浮动带来的父级塌陷的问题，而不是不浮动
		解决父级高度塌陷的问题：
			1、给父级加高度-----扩展性不好
				很多时候我们会由内容撑开盒子的高度，所以这种方法死板
			2、overflow:hidden;------ 可能会导致想超出的东西显示不出来
				我们要实现让元素内容超出隐藏的时候是不是必须得知道元素的宽高大小，所以这个会强行计算浮动元素的高度，得到自身盒子的高度
			3、给浮动元素的最后面加一个块级，设置clear属性清除浮动
			4、用伪元素清除浮动---最主流的写法
			
		使用伪元素清除浮动的公共样式clearfix给谁加？
			给浮动元素的父级

		clear  :  清除浮动
			left   清除左浮动
			right  清除右浮动
			both   清除左右的浮动
			只能用块级清除
		
		文档流：元素的空间
		浮动会挤出文字
					</span>
				</li>
				<li>
					<h2>05-浮动被卡主的情况</h2>
					<span>父级空间不够的情况下，浮动元素会往下掉，
			可能会出现被别的浮动元素卡住的情况
			1、掉下来的 元素X 受前面浮动元素的高度影响，前面浮动元素的
			高度会导致 X 卡住的位置。
					</span>
				</li>
			</ul>
	</body>
</html>
